import React, { Component } from "react";

class CirculationBindEvent extends Component {
    state = {
        arr: [
            {
                id: 1,
                value: 'basketball'
            },
            {
                id: 2,
                value: 'baseball',
            },
            {
                id: 3,
                value: 'tennis'
            }
        ],
    };
    handle = (val) => {
        console.log(`当前点击的是${val}`);
    };
    render() {
        let { arr } = this.state;
        return <>
            <div>
                {
                    arr.map((item) => {
                        let { id, value } = item;
                        return (
                            <p 
                                key={id} 
                                onClick={this.handle.bind(this, value)} 
                                style={
                                    {
                                        border: '1px solid #f40',
                                        margin: '10px 0',
                                        padding: '5px 15px',
                                        cursor: 'pointer',
                                    }
                                }
                            >{value}</p>
                        )
                    })
                }
            </div>
        </>
    };
}
export default CirculationBindEvent;
/*
    直接在循环的每个元素上添加onClick属性， 因为React事件处理机制已经将事件委托到了#root这个容器上；
*/